Introduction
In this article we are going to see how to use media framework
which helps the application developers to stream video and audio files and to
use the integrated Music and
video Hubs to select the
media files. Media in windows phone 7 uses the MediaElemt API
to incorporate the audio and video files using the inbuilt device media player
in Silverlight for Windows Phone 7 Application. In this article we will see how
to play a video file using the MediaElementAPI
with windows phone 7 application development. Let us see the step by step
process on how to use the Media development in Windows phone 7 application using
the MediaElement API.
Steps
Open Visual Studio 2010 and create a new Silverlight for Windows
Phone 7 application project by providing a valid project name as shown in the
screen below.
Now let us customize the Mainpage.XAML by
adding a button control and a MediaElement to
play the video file as shown in the screen below. Also we have customized the
header grid to have a unique design for this series of articles.
XAML Code
ContentPanel"
Grid.Row="1" Margin="12,0,12,0"><Button Content="Play
Video" Height="72" HorizontalAlignment="Left" Margin="12,30,0,0"
Name="button1" VerticalAlignment="Top"
Width="427" /><MediaElement Height="356" HorizontalAlignment="Left" Margin="34,144,0,0"
Name="mediaElement1" VerticalAlignment="Top" Width="386" /> </Grid>
Now let us add a sample video file to the project which we will
load on click of the button. We have added a sample .WMV file to the root folder
of the project once we added the file now go to the button click event (Play
Video button) and write the below code to stream the video file on button click
as shown in the below screen.
XAML Code
PhoneApplicationPage
x:Class="F5debugWp7Media.MainPage"
xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation%22">
http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
xmlns:x="
<a href="http://schemas.microsoft.com/winfx/2006/xaml%22">
http://schemas.microsoft.com/winfx/2006/xaml"</a>
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="
<a href="http://schemas.microsoft.com/expression/blend/2008%22">
http://schemas.microsoft.com/expression/blend/2008"</a>
xmlns:mc="
<a href="http://schemas.openxmlformats.org/markup-compatibility/2006"">
http://schemas.openxmlformats.org/markup-compatibility/2006"</a>
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--<span class="hiddenSpellError" pre="">LayoutRoot</span> is
the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--<span class="hiddenSpellError" pre="">TitlePanel</span>
contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="F5DEBUG
WP7 TUTORIALS" Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="video
player" Margin="9,-7,0,0" Style="{StaticResource
PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Play
Video" Height="72" HorizontalAlignment="Left" Margin="12,30,0,0" Name="button1"
VerticalAlignment="Top" Width="427" Click="button1_Click" />
<MediaElement Height="356" HorizontalAlignment="Left" Margin="34,144,0,0" Name="mediaElement1"
VerticalAlignment="Top" Width="386" />
</Grid>
</Grid>
PhoneApplicationPage>
C# Code
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
Microsoft.Phone.Controls;
namespace
F5debugWp7Media
{
public partial
class MainPage
: PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void
button1_Click(object sender, RoutedEventArgs e)
{
mediaElement1.Source = new Uri("Bear.wmv",
UriKind.Relative);
mediaElement1.Play();
}
}
}
Now we are done with our code, let us build and execute the
application by directly pressing the F5 button from the keyboard or by selecting
the Build and Execute option from the tool bar. We can see the output of the
application as shown in the screen below.
Now we can see the video streaming as shown in the above screen, with the option
to restart and reset the video at any point of time. We can also customize to
select the file randomly and play as we normally do using the play lists which we
can see in depth in our upcoming articles.
Conclusion
So in this article we have seen how to use the Media Element to
stream video files and use it effectively. We will see in depth on the property
available to make a customized video player in our upcoming articles.